<script lang="ts" setup>
import { BuiltInServices, type SearchService } from '@/component/Search/SearchService.ts'
import { computed, type Ref, ref } from 'vue'

const currentServiceName = ref('必应')
const searchService: Ref<Array<SearchService>> = ref([ ...BuiltInServices ])
const searchValue = ref('')

const serviceMapping = computed(() => {
    const mapping: Record<string, SearchService> = searchService.value
            .reduce((mapping, i) => {
                mapping[i.name] = i
                return mapping
            }, {} as Record<string, SearchService>)
    return mapping
})

const currentSearchUrl = computed(() => {
    if (!currentServiceName.value) {
        return null
    }
    return serviceMapping.value[currentServiceName.value]?.searchUrl(searchValue.value)
})

const onSearch = () => {
    if (currentSearchUrl.value) {
        window.open(currentSearchUrl.value, '_blank')
    }
}

</script>

<template>
<div class="search-area">
    <a-select v-model="currentServiceName" placeholder="选择搜索引擎">
        <template #label="{ data }">
            <a-image
                    v-if="serviceMapping[data.value]?.icon"
                    :height="50"
                    :preview="false"
                    :src="serviceMapping[data.value].icon"
                    :width="50"
                    fit="cover"
            />
            <span v-else>{{ data?.label }}</span>
        </template>

        <a-option v-for="s in searchService" :key="s.name" :label="s.name" :value="s.name" />

        <template #option="{data}">
            {{ data }}
            <h2>这是啥?</h2>
        </template>
    </a-select>
    <a-input v-model="searchValue" placeholder="输入并搜索" @keyup.enter.prevent.passive="onSearch" />
</div>
</template>

<style lang="scss">
.search-area {
    height: var(--search-area-height);
    max-width: 60vw;
    margin: 0 auto;

    font-size: 26px;
    font-weight: bold;
    letter-spacing: 5px;

    display: flex;
    align-items: center;

    .arco-select {
        flex: 0 0 80px;
    }

    .arco-select,
    .arco-input-wrapper {
        height: 100px;
    }

    .arco-select {
        background-color: color-mix(in srgb, var(--color-fill-2), transparent 50%);
    }

    .arco-input,
    .arco-input-wrapper,
    .arco-select,
    .arco-select-view-value {
        font-size: inherit !important;
        letter-spacing: inherit !important;
    }
}
</style>
